<template>
  <div class="pc-adr-infos">
    <div class="top-info flex-left">
      <span>{{$t('address.title')}}</span>
      <span class="adr">{{adrInfo.adr}}</span>
      <div class="tag-box" v-if="isContact(adrInfo.adr)">{{adrInfo.adr|filterAdrTag}}</div>
      <div
        class="copy-btn"
        v-clipboard:copy="adrInfo.adr"
        v-clipboard:success="success"
        v-clipboard:error="error"
      >{{$t('components.copy')}}</div>
      <el-popover placement="right" trigger="click">
        <div id="qrcode" ref="qrcode" class="flex-center"></div>
        <p class="erweima-btn" @click="downCode()">{{$t('address.save')}}</p>
        <i class="iconfont iconerweima" slot="reference"></i>
        <!-- @mouseenter="showCode=true"
        @mouseleave="showCode=false"-->
      </el-popover>
      <!-- <i class="iconfont iconerweima" @mouseenter="showCode=true" @mouseleave="showCode=false"></i>
      <div id="qrcode" ref="qrcode" class="flex-center" v-show="showCode"></div>-->
    </div>
    <div class="infos-box table-shadow">
      <h1>{{$t('blockDetail.general')}}</h1>
      <div class="flex-center">
        <div class="left flex-left-stright">
          <div class="item flex-between">
            <div class="flex-left">
              <img src="../../../assets/img/tip/red.png" />
              <label>{{$t('address.balance')}}</label>
              <span>{{parseFloat((adrInfo.balance/100000000).toFixed(4))}} {{$store.getters.baseCoin}}</span>
            </div>
            <el-select
              v-if="contractInfo.length>0"
              class="contract-type"
              v-model="contractSearch"
              :placeholder="$t('address.placeholder')"
              size="small"
              @change="searchContract(contractSearch)"
            >
              <el-option v-for="(item, index) in contractInfo" :key="index" :value="item.execer"></el-option>
            </el-select>
          </div>
          <!-- <div class="item flex-left">
            <img src="../../../assets/img/tip/blue.png" />
            <label>总接收</label>
            <span>{{parseFloat((adrInfo.reciver/100000000).toFixed(4))}} {{$store.getters.baseCoin}}</span>
          </div>
          <div class="item flex-left">
            <img src="../../../assets/img/tip/green.png" />
            <label>总发送</label>
            <span>{{adrInfo.reciver?parseFloat(((adrInfo.reciver - adrInfo.balance)/100000000).toFixed(4)):0}} {{$store.getters.baseCoin}}</span>
          </div>-->
          <div class="item flex-left">
            <img src="../../../assets/img/tip/blue.png" />
            <label>{{$t('address.frozen')}}</label>
            <span>{{ adrInfo.frozen? parseFloat((adrInfo.frozen/100000000).toFixed(8)):0 }} {{$store.getters.baseCoin}}</span>
          </div>
        </div>
        <div class="right flex-left-stright">
          <div class="item flex-left">
            <img src="../../../assets/img/tip/blue.png" />
            <label>{{$t('address.txCount')}}</label>
            <span>{{adrInfo.txCount}}</span>
          </div>
          <div class="item flex-left">
            <img src="../../../assets/img/tip/green.png" />
            <label>{{$t('address.total')}}</label>
            <v-select class="token-select" :accValue="tokenBalance" :value="totalValue"></v-select>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import vSelect from "./SelectBox";
import adrInfo from "@/mixins/Address/addressInfo.js";
export default {
  mixins: [adrInfo],
  components: {
    vSelect
  }
};
</script>

<style lang="scss">
.erweima-btn {
  cursor: pointer;
}
.pc-adr-infos {
  .top-info {
    margin-top: 30px;
    position: relative;
    .tag-box {
      margin-left: 10px;
      display: inline-block;
      padding: 0 10px;
      height: 25px;
      line-height: 25px;
      text-align: center;
      border-radius: 15px;
      color: #516379;
      box-shadow: 0px 0 5px rgba(99, 104, 222, 0.5);
      cursor: default;
    }
    span {
      color: $grey_deep;
      font-size: 19px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
    }
    .adr {
      margin-left: 14px;
      font-family: PingFangSC-Semibold;
      color: $black;
      font-weight: 500;
    }
    i {
      margin-left: 20px;
      font-size: 20px;
      color: #f58348;
      cursor: pointer;
    }
  }
  .infos-box {
    margin-top: 30px;
    // height: 250px;
    background: $white;
    border-radius: 5px;
    border: 1px solid rgba(235, 239, 241, 1);
    h1 {
      height: 70px;
      line-height: 70px;
      padding-left: 30px;
      color: $black;
      font-size: 16px;
      font-family: PingFangSC-Semibold;
      border-bottom: 1px solid #eee;
    }
    .left,
    .right {
      width: 50%;
      height: 140px;
      padding: 20px 30px;
      .item {
        height: 55px;
        line-height: 55px;
        font-size: 14px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: $black;
        label {
          min-width: 125px;
          margin-left: 21px;
        }
        .token-select {
          z-index: 100;
        }
        .pc-select-box {
          width: 371px;
        }
      }
    }
    .left {
      border-right: 1px solid #eee;
    }
  }
}
</style>

<style lang="scss">
.erweima-btn {
  margin-top: 8px;
  text-align: center;
  color: $black;
}
.contract-type {
  width: 120px;
  input {
    border-radius: 20px;
  }
}
</style>